<template>
  <div>
    <el-form v-model="form" inline>
      <el-form-item label="支行名称">
        <el-input v-model="form.searchText" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchBankData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addData">导入支行数据</el-button>
      </el-form-item>
    </el-form>

    <collapse-transfer :data="bankData"></collapse-transfer>
    <el-form>
      <el-form-item label="*授权协议：">
        <el-button type="primary" size="mini">上传</el-button>
        <collapse-upload-tags></collapse-upload-tags>
      </el-form-item>
      <slot></slot>
    </el-form>
  </div>
</template>

<script>
import CollapseTransfer from "./CollapseTransfer.vue";
import CollapseUploadTags from "./CollapseUploadTags.vue";
export default {
  name: "CollapseAuthInfo",
  components: {
    CollapseTransfer,
    CollapseUploadTags,
  },
  provide() {
    return {
      searchQuery: this.form,
    };
  },
  data() {
    return {
      form: {
        searchText: "",
      },
      bankData: [],
    };
  },
  computed: {},
  watch: {
    "form.bankName": function (val) {
      this.searchText = val;
    },
  },
  created() {
    this.getData();
  },
  methods: {
    searchBankData() {
      console.log("searchBankData");
    },
    downloadTemplate() {
      console.log("downloadTemplate");
    },
    addData() {
      console.log("addData");
    },
    getData() {
      this.$http
        .post("http://localhost:3000/mock/auth/list")
        .then((response) => {
          this.bankData = response.data;
        });
    },
  },
};
</script>

<style scoped>
.el-transfer /deep/ .el-transfer-panel {
  width: "40%";
}
</style>